<template>
  <div class="app-container">
    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addUser"
        v-if="permissions.indexOf('/admin/userAdd') != -1"
      >{{ $t("新增用户") }}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="username" :label="$t('账号')"></el-table-column>
        <el-table-column prop="name" :label="$t('姓名')"></el-table-column>
        <el-table-column prop="phone" :label="$t('电话')"></el-table-column>
        <el-table-column :label="$t('操作')" width="280" fixed="right">
          <template slot-scope="scope">
            <button
              v-if="permissions.indexOf('/admin/userEdit') != -1"
              class="table_btn font12 bg_blue text_white"
              @click="updateInfo(scope.row)"
            >{{ $t("修改信息") }}</button>
            <button
              v-if="permissions.indexOf('/admin/userRule') != -1"
              class="table_btn font12 bg_blue text_white"
              @click="updateAuth(scope.row)"
            >{{ $t("修改权限") }}</button>
            <button
              v-if="permissions.indexOf('/admin/userDelete') != -1"
              class="table_btn font12 bg_danger text_white"
              @click="deletes(scope.row)"
            >{{ $t("删除") }}</button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 修改信息 -->
    <el-dialog
      :visible.sync="showInfoDialog"
      width="900px"
      :title="isUpdateInfo ? $t('修改信息') : $t('添加信息')"
      :close-on-click-modal="false"
    >
      <div class="info_box u-f">
        <div class="left u-f1" style="margin-right: 10px;">
          <h3 class="head font14 text_black">{{ $t("用户信息") }}</h3>
          <div style="padding-left: 20px;">
            <div class="ipt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("账号") }}：</span>
              <el-input v-model="addFrom.username" :placeholder="$t('请输入账号')"></el-input>
            </div>
            <div class="ipt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("密码") }}：</span>
              <el-input v-model="addFrom.password" show-password :placeholder="$t('请输入密码')"></el-input>
            </div>
            <p
              class="font14 text_danger"
              style="padding-left: 90px;"
              v-if="isUpdateInfo"
            >{{ $t("不填则表示不修改") }}</p>
            <div class="ipt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("确认密码") }}：</span>
              <el-input v-model="addFrom.repassword" show-password :placeholder="$t('请输入密码')"></el-input>
            </div>
            <div class="ipt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("姓名") }}：</span>
              <el-input v-model="addFrom.name" :placeholder="$t('请输入姓名')"></el-input>
            </div>
            <div class="ipt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("手机号") }}：</span>
              <el-input v-model="addFrom.phone" :placeholder="$t('请输入手机号')"></el-input>
            </div>
            <div class="ipt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("状态") }}：</span>
              <el-radio-group v-model="addFrom.status">
                <el-radio :label="1">{{ $t("正常") }}</el-radio>
                <el-radio :label="2">{{ $t("禁用") }}</el-radio>
              </el-radio-group>
            </div>
          </div>
          <el-button type="primary" @click="addSubmit" v-if="!isUpdateInfo">
            {{
            $t("提交")
            }}
          </el-button>
          <el-button type="primary" @click="updateSubmit" v-if="isUpdateInfo">
            {{
            $t("提交")
            }}
          </el-button>
        </div>
        <div class="right u-f1" style="margin-left: 10px;" v-if="isUpdateInfo">
          <h3 class="head font14 text_black">{{ $t("更多信息") }}</h3>
          <div style="padding-left: 20px;">
            <div class="txt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("用户名") }}：</span>
              <span class="font14 text_black">{{ addFrom.username }}</span>
            </div>
            <div class="txt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("权限组") }}：</span>
              <span class="font14 text_black">{{ addFrom.roles }}</span>
            </div>
            <div class="txt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("上次登录时间") }}：</span>
              <span class="font14 text_black">
                {{
                addFrom.last_login_time
                }}
              </span>
            </div>
            <div class="txt_box u-f u-f-ac">
              <span class="label font14 text_black">{{ $t("上次登录IP") }}：</span>
              <span class="font14 text_black">{{ addFrom.last_login_ip }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 修改权限 -->
    <el-dialog
      width="900px"
      :visible.sync="showJuris"
      :title="$t('修改权限')"
      :close-on-click-modal="false"
    >
      <div class="tree_box">
        <el-table :data="jurisData" ref="jurisTable" @selection-change="handleJurisSelection">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="title" :label="$t('组名称')"></el-table-column>
          <el-table-column prop="description" :label="$t('说明')"></el-table-column>
        </el-table>
        <el-button type="primary" @click="jurisSubmit">{{$t('确定')}}</el-button>
      </div>
    </el-dialog>
    <refresh @click="getData"></refresh>
    
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "admin-userList",
  data() {
    return {
      tableData: [],
      showInfoDialog: false,
      isUpdateInfo: false,
      addFrom: {
        id: "",
        username: "",
        password: "",
        repassword: "",
        name: "",
        phone: "",
        status: 1,
        last_login_ip: "",
        last_login_time: "",
        roles: ""
      },
      showJuris: false,
      jurisId: "",
      jurisSelection: [],
      jurisData: []
    };
  },
  computed: {
    ...mapState(["permissions"])
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      util.$http("/admin/userList").then(res => {
        if (res.code == 1) {
          this.tableData = res.data;
        }
      });
    },
    changeStatus(row, status) {
      row.status = status;
    },
    getGroupDetail(id, type = "update") {
      util
        .$http("/admin/userDetail", {
          id
        })
        .then(res => {
          if (res.code == 1) {
            if (type == "update") {
              this.addFrom = {
                id: res.data.id,
                username: res.data.username,
                password: "",
                repassword: "",
                name: res.data.name,
                phone: res.data.phone,
                status: res.data.status,
                last_login_ip: res.data.last_login_ip,
                last_login_time: res.data.last_login_time,
                roles: res.data.roles
              };
            } else {
              this.jurisData = res.data.groups; //
              let arr = [];
              for (let item of res.data.groups) {
                let id = item.id.toString();
                if (res.data.auth_groups.indexOf(id) != -1) {
                  arr.push(item);
                }
              }
              this.selectCheck(arr);
            }
          }
        });
    },
    selectCheck(rows) {
      if (rows.length > 0) {
        this.$nextTick(() => {
          rows.forEach(row => {
            this.$refs.jurisTable.toggleRowSelection(row, true);
          });
        });
      }
    },
    addUser() {
      this.addFrom = {
        id: "",
        username: "",
        password: "",
        repassword: "",
        name: "",
        phone: "",
        status: 1,
        last_login_ip: "",
        last_login_time: "",
        roles: ""
      };
      this.isUpdateInfo = false;
      this.showInfoDialog = true;
    },
    addSubmit() {
      if (this.addFrom.password.trim() !== this.addFrom.repassword.trim()) {
        this.$message({
          message: this.$t("密码不一样"),
          type: "warning"
        });
        return;
      }
      util
        .$http("/admin/userAdd", {
          username: this.addFrom.username,
          name: this.addFrom.name,
          phone: this.addFrom.phone,
          password: this.addFrom.password.trim(),
          status: this.addFrom.status
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showInfoDialog = false;
            this.addFrom = {
              id: "",
              username: "",
              password: "",
              repassword: "",
              name: "",
              phone: "",
              status: 1,
              last_login_ip: "",
              last_login_time: "",
              roles: ""
            };
            this.getData();
          }
        });
    },
    updateSubmit() {
      if (this.addFrom.password.trim() !== this.addFrom.repassword.trim()) {
        this.$message({
          message: this.$t("密码不一样"),
          type: "warning"
        });
        return;
      }
      util
        .$http("/admin/userEdit", {
          id: this.addFrom.id,
          username: this.addFrom.username,
          name: this.addFrom.name,
          phone: this.addFrom.phone,
          password: this.addFrom.password.trim(),
          status: this.addFrom.status
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showInfoDialog = false;
            this.addFrom = {
              id: "",
              username: "",
              password: "",
              repassword: "",
              name: "",
              phone: "",
              status: 1,
              last_login_ip: "",
              last_login_time: "",
              roles: ""
            };
            this.getData();
          }
        });
    },
    handleJurisSelection(val) {
      this.jurisSelection = val;
    },
    jurisSubmit() {
      let arr = [];
      for (let item of this.jurisSelection) {
        arr.push(item.id);
      }
      util
        .$http("/admin/userRule", {
          id: this.jurisId,
          rule: arr
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showJuris = false;
          }
        });
    },
    updateInfo(row) {
      this.isUpdateInfo = true;
      this.showInfoDialog = true;
      setTimeout(() => {
        this.getGroupDetail(row.id);
      }, 150);
    },
    updateAuth(row) {
      this.jurisId = row.id;
      this.showJuris = true;
      setTimeout(() => {
        this.getGroupDetail(row.id, "bind");
      }, 150);
    },
    deletes(row) {
      this.$confirm(this.$t("是否要删除当前用户"))
        .then(() => {
          util
            .$http("/admin/userDelete", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.head_search {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.qrcode {
  cursor: pointer;
  margin: 0;
}
.circle {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 100%;
}
.cabinet_status {
  cursor: pointer;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
}
.table_btn {
  cursor: pointer;
  padding: 7px 10px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  margin-right: 15px;
}
.avatar {
  width: 40px;
  height: 40px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.info_box .head {
  border-left: 4px solid #409eff;
  padding-left: 10px;
}
.info_box .ipt_box {
  margin-bottom: 20px;
}
.info_box .ipt_box .label {
  display: inline-block;
  width: 90px;
}
.info_box .ipt_box .el-input {
  width: 200px;
}
.info_box .txt_box {
  margin-bottom: 10px;
}
.info_box .el-button {
  margin-top: 20px;
  margin-left: 110px;
}
.tree_box {
  padding-left: 50px;
  text-align: right;
}
.tree_box .el-button {
  margin-top: 40px;
  margin-right: 20px;
}
</style>
